<template>
  <div class="navigation">
    <!-- <van-tabbar :active="active" @change="onChange">
      <van-tabbar-item>
        <img
          slot="icon"
          :src="icon.normal"
          style="width: 30px; height: 18px"
        />
        <img
          slot="icon-active"
          :src="icon.active"
          style="width: 30px; height: 18px"
        />
        自定义
      </van-tabbar-item>
      <van-tabbar-item icon="home-o">分类</van-tabbar-item>
      <van-tabbar-item icon="cluster-o">库存</van-tabbar-item>
      <van-tabbar-item icon="records">商品兑换券</van-tabbar-item>
      <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
import { Icon } from "vant";
import { Burron } from "vant";

export default {
  name: "navigation",
  components: {
    Icon,
    Tabbar,
    TabbarItem,
  },
  data() {
    return {
      active: 2,
      icon: {
        normal: "https://img.yzcdn.cn/vant/user-inactive.png",
        active: "https://img.yzcdn.cn/vant/user-active.png",
      },
    };
  },
  methods: {
    onChange(event) {
      this.active = event;
      console.log(this.active);
      const routerArray = [
        "/shoppingmall/Commoditysearch",
        "/shoppingmall/Commodity",
        "/shoppingmall/inventory",
        "/shoppingmall/shoppingtrolley",
      ];
      // this.$router.push(routerArray[event]);
    },
  },
  mounted() {
    console.log(this.active,this.icon)
  }
};
</script>
<style scoped>
.navigation {
  height: 100vh;
}
.van-tabbar {
  width: 100vw;
}
</style>
